import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { Row, Col, Card, List, Icon, Tabs, Progress, DatePicker, Tag } from 'antd';
import echarts from 'echarts';
import Echarts from 'echarts-for-react';
import 'echarts-gl';
import moment from 'moment';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

class Home extends Component {
  componentDidMount() {
    window.addEventListener('resize', this.resizeBind);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeBind);
  }

  getXianTiOption = () => {
    const option = {
      color: ['#3398DB'],
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          },
          show: false
        }
      ],
      grid: {
        left: '',
        right: '5%',
        top: '0px',
        bottom: '0px',
        containLabel: true
      },
      yAxis: [
        {
          type: 'value',
          show: false
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '15%',
          barCateGoryGap: '1px',
          data: [10, 12, 20, 15, 20, 13, 25, 20, 19, 30, 21, 22]
        }
      ]
    };
    return option;
  };

  getChanXianOption = () => {
    const option = {
      grid: {
        top: '9%',
        left: '3%',
        right: '20px',
        bottom: '0%',
        containLabel: true
      },
      yAxis: [
        {
          type: 'category',
          data: ['包装3线', '包装2线', '包装1线', '制配2线', '制配1线'],
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#333'
            }
          },
          axisLine: {
            show: false
          }
        }
      ],
      xAxis: [
        {
          type: 'value',
          position: 'top',
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      ],
      backgroundColor: '#fff',
      series: [
        {
          name: 'Status',
          type: 'bar',
          barWidth: 14,
          data: [5000, 7600, 12000, 7200, 4800],
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              offset: [0, -15],
              textStyle: {
                color: '#333'
              }
            }
          },

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: '#2fb7e7' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#8073e5' // 100% 处的颜色
                  }
                ],
                false
              ),
              barBorderRadius: [0, 15, 15, 0],
              shadowColor: 'rgba(0,0,0,0.1)',
              shadowBlur: 3,
              shadowOffsetY: 3
            }
          }
        }
      ]
    };
    return option;
  };

  getOption = () => {
    const option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '慧程',
          type: 'bar',
          barWidth: '60%',
          data: [100, 502, 200, 334, 390, 330, 220, 300, 420, 200, 100, 150]
        }
      ]
    };
    return option;
  };

  getBenYueOption = () => {
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        show: false
      },
      yAxis: {
        type: 'value',
        show: false
      },
      series: [
        {
          data: [1, 3, 4, 5, 6, 7, 8, 9, 10, 11],
          type: 'line',
          color: 'green'
        }
      ]
    };
    return option;
  };

  getSheBeiOption = () => {
    const option = {
      backgroundColor: 'rgba(255,255,255,1)',
      color: ['#2fb7e7', '#36cbcb', '#4ecb73', '#fbd437', '#975fe5'],
      legend: {
        orient: 'vartical',
        x: 'left',
        top: 'center',
        left: '80%',
        bottom: '0%',
        data: ['压盖机', '封箱机', '灌装机', '烘干机', '贴标机'],
        itemWidth: 20,
        itemHeight: 14,
        itemGap: 15,
        formatter: name => '   ' + name
      },
      grid: {
        left: '0',
        right: '0',
        bottom: '0',
        top: '30px',
        containLabel: true
      },
      series: [
        {
          name: '设备故障周统计',
          type: 'pie',
          clockwise: false,
          minAngle: 20,
          radius: ['55%', '80%'],
          center: ['35%', '45%'],
          avoidLabelOverlap: false,
          itemStyle: {
            normal: {
              borderColor: '#ffffff',
              borderWidth: 10
            }
          },
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: '{text|{b}}\n{value|{d}%}',
              rich: {
                text: {
                  color: '#666',
                  fontSize: 14,
                  align: 'center',
                  verticalAlign: 'middle',
                  padding: 5
                },
                value: {
                  color: '#333',
                  fontSize: 24,
                  align: 'center',
                  verticalAlign: 'middle'
                }
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: 46
              }
            }
          },
          data: [
            {
              name: '压盖机',
              value: 13
            },
            {
              name: '封箱机',
              value: 25
            },
            {
              name: '灌装机',
              value: 27
            },
            {
              name: '烘干机',
              value: 30
            },
            {
              name: '贴标机',
              value: 20
            }
          ]
        }
      ]
    };
    return option;
  };

  getChengpinOption = () => {
    const option = {
      backgroundColor: '#ffffff',
      color: ['#f2637b', '#f4ce35', '#2fb7e7'],
      series: [
        {
          name: '成品合格率',
          type: 'gauge',
          radius: '85%',
          detail: {
            formatter: '{value}%'
          },
          title: { offsetCenter: [0, '70%'] },
          min: '80',
          max: '100',
          axisLine: {
            show: true,
            lineStyle: {
              width: 20,
              shadowBlur: 0,
              color: [[0.2, '#f2637b'], [0.5, '#f4ce35'], [1, '#2fb7e7']]
            }
          },
          axisTick: { show: false },
          axisLabel: { show: false },
          data: [
            {
              value: 94.2,
              name: '成品合格率'
            }
          ]
        }
      ]
    };
    return option;
  };

  getBanChengpinOption = () => {
    const option = {
      backgroundColor: '#ffffff',
      color: ['#f2637b', '#f4ce35', '#2fb7e7'],
      series: [
        {
          name: '半成品合格率',
          type: 'gauge',
          radius: '85%',
          detail: {
            formatter: '{value}%'
          },
          title: { offsetCenter: [0, '70%'] },
          min: '80',
          max: '100',
          axisLine: {
            show: true,
            lineStyle: {
              width: 20,
              shadowBlur: 0,
              color: [[0.2, '#f2637b'], [0.5, '#f4ce35'], [1, '#2fb7e7']]
            }
          },
          axisTick: { show: false },
          axisLabel: { show: false },
          data: [
            {
              value: 95.1,
              name: '半成品合格率'
            }
          ]
        }
      ]
    };
    return option;
  };

  getBanZuOption = () => {
    const option = {
      backgroundColor: '#FFF',
      legend: {
        data: ['A1班', 'B1班', 'C1班'],
        orient: 'vertical',
        right: '2%',
        top: '5%'
      },
      grid: {
        top: '9%',
        bottom: '15%',
        left: '6%',
        right: '10%'
      },
      tooltip: {
        trigger: 'axis',
        label: {
          show: true
        }
      },
      xAxis: {
        boundaryGap: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false,
          alignWithLabel: true
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        axisLine: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dotted',
            color: '#d9d9d9'
          }
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name: 'A1班',
          type: 'line',
          symbol: 'circle',
          symbolSize: 7,
          lineStyle: {
            color: 'rgb(33, 148, 246)',
            shadowBlur: 12,
            shadowColor: 'rgb(33, 148, 246,0.9)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          itemStyle: {
            color: 'rgb(33, 148, 246)',
            borderWidth: 1,
            borderColor: '#FFF'
          },
          label: {
            show: false,
            distance: 1
          },
          data: [2000, 1800, 2800, 900, 1600, 2000, 3000]
        },
        {
          name: 'B1班',
          type: 'line',
          symbol: 'circle',
          symbolSize: 7,
          lineStyle: {
            color: 'rgb(78, 203, 115)',
            shadowBlur: 12,
            shadowColor: 'rgb(78, 203, 115,0.9)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          itemStyle: {
            color: 'rgb(78, 203, 115)',
            borderWidth: 1,
            borderColor: '#FFF'
          },
          label: {
            show: false,
            distance: 1
          },
          data: [2900, 1350, 3479, 4126, 3570, 2122, 1256]
        },
        {
          name: 'C1班',
          type: 'line',
          symbol: 'circle',
          symbolSize: 7,
          lineStyle: {
            color: 'rgb(51, 201, 255)',
            shadowBlur: 12,
            shadowColor: 'rgb(51, 201, 255,0.9)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          itemStyle: {
            color: 'rgb(51, 201, 255)',
            borderWidth: 1,
            borderColor: '#FFF'
          },
          label: {
            show: false,
            distance: 1
          },
          data: [3781, 3265, 3289, 3167, 4421, 4312, 3256]
        }
      ]
    };
    return option;
  };

  getOption4 = () => {
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['压泵机', '切割机', '缝纫机', '除湿器', '打碎机']
      },
      series: [
        {
          name: '来自慧程大数据平台',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: 335, name: '压泵机' },
            { value: 310, name: '切割机' },
            { value: 234, name: '缝纫机' },
            { value: 135, name: '除湿器' },
            { value: 1548, name: '打碎机' }
          ]
        }
      ]
    };
    return option;
  };

  getOption5 = () => {
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        ype: 'value'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {},
          smooth: true,
          color: '#BFEFFF'
        }
      ]
    };
    return option;
  };

  // resizeBind = () => {
  //   const spanWidth = document.getElementsByClassName('jianting');
  //   const s = spanWidth[0].style.wordSpacing.substring(0, 2);
  //   console.log(spanWidth);
  //   if (parseInt(s, 10) < 30) {
  //     spanWidth[0].style.display = 'none';
  //   }
  // }


  render() {
    const style = {
      fontSize: '12px',
      padding: '20px 20px 20px 20px'
    };
    const divStyle = {
      backgroundColor: '#fff',
      display: 'inline-block',
      width: 'calc(20% - 10px)',
      minWidth: '210px',
      flexGrow: 1,
      marginRight: '10px',
      borderRadius: '5px'
    };
    const divLastStyle = {
      backgroundColor: '#FFF',
      display: 'inline-block',
      width: '20%',
      minWidth: '210px',
      flexGrow: 1,
      borderRadius: '5px'
    };
    const divErStyle = {
      backgroundColor: '#fff',
      marginTop: '10px',
      display: 'inline-block',
      minWidth: '438px',
      width: 'calc(40% - 10px)',
      flexGrow: 1,
      borderRadius: '5px'
    };
    const divErLastStyle = {
      marginLeft: '10px',
      backgroundColor: '#fff',
      marginTop: '10px',
      display: 'inline-block',
      flexGrow: 1,
      minWidth: '674px',
      width: '60%',
      borderRadius: '5px'
    };
    const divThreeStyle = {
      backgroundColor: '#fff',
      display: 'inline-block',
      marginTop: '10px',
      minWidth: '438px',
      flexGrow: 1,
      width: 'calc(40% - 10px)',
      marginRight: '10px',
      marginBottom: '20px',
      borderRadius: '5px',
      verticalAlign: 'top'
    };
    const divThreeLastStyle = {
      backgroundColor: '#FFF',
      display: 'inline-block',
      minWidth: '215px',
      marginTop: '10px',
      flexGrow: 1,
      width: '20%',
      marginBottom: '20px',
      verticalAlign: 'top',
      borderRadius: '5px'
    };
    return (
      <div className='shadow-radius'>

      </div>
    );
  }
}

Home.propTypes = {};

const mapStateToProps = state => ({});

export default connect(
  mapStateToProps,
  {}
)(Home);
